extends layout/main-layout

block active-item
  - menu['Elements']['active'] = 1
  - menu['Elements']['S']['Animations']['active'] = 1


block content
  
  h3 Animations
    br
    small animo is a powerful little tool that makes managing CSS animations extremely easy. 

  - var animations = ['bounce', 'flash', 'pulse', 'rubberBand', 'shake', 'swing', 'tada', 'wobble', 'bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp', 'bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp', 'fadeIn', 'fadeInDown', 'fadeInDownBig', 'fadeInLeft', 'fadeInLeftBig', 'fadeInRight', 'fadeInRightBig', 'fadeInUp', 'fadeInUpBig', 'fadeOut', 'fadeOutDown', 'fadeOutDownBig', 'fadeOutLeft', 'fadeOutLeftBig', 'fadeOutRight', 'fadeOutRightBig', 'fadeOutUp', 'fadeOutUpBig', 'flip', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY', 'lightSpeedIn', 'lightSpeedOut', 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'slideInDown', 'slideInLeft', 'slideInRight', 'slideOutLeft', 'slideOutRight', 'slideOutUp', 'hinge', 'rollIn', 'rollOut', ]
  // START row
  .row
    - each val in animations
      .col-md-2
        +anim-panel-manual(val)
  // END row
  
  h3.page-header Trigger Animations on Scroll
  .row
    .col-md-4
      // START panel
      .panel.panel-default(data-toggle="play-animation", data-play="bounceIn", data-offset="0")
        .panel-heading bounceIn
        .panel-body 
          code data-toggle="play-animation" 
          code data-play="bounceIn" 
          code data-offset="0"

      // END panel
    .col-md-4
      // START panel
      .panel.panel-default(data-toggle="play-animation", data-play="fadeInDown", data-offset="0")
        .panel-heading fadeInDown
        .panel-body 
          code data-toggle="play-animation" 
          code data-play="fadeInDown" 
          code data-offset="0"
      // END panel
    .col-md-4
      // START panel
      .panel.panel-default(data-toggle="play-animation", data-play="fadeInLeftBig", data-offset="0", data-delay="1000")
        .panel-heading fadeInLeftBig
        .panel-body 
          code data-toggle="play-animation" 
          code data-play="fadeInLeftBig" 
          code data-offset="0" 
          code data-delay="1000"
      // END panel


//- this mixin builds panel with a button
//- to trigger a specific animation on a target element
mixin anim-panel-manual(animation)
  // START panel
  .panel.panel-default(id='panel-anim-#{animation}')
    .panel-heading
      = animation
    .panel-body
      // Animation trigger
      a(href='#',data-toggle="play-animation", data-target="#panel-anim-#{animation}", data-play="#{animation}")
        em.fa.fa-play.fa-2x
  // END panel
